Hello and welcome.
In this Lakeshore we are going to be styling are hastier mail that we created for our app.
So I mean hi my text editor.
This is v.
Here's his file.
So this is where we're going to define the stylin for our help.
So we're gonna use the I.D. where we've got I.D. to use.
If not we'll use the chalk elements to see how the his team.
I have had some basic styling here for the body of our all here mail.
So this style would be applied to the body where you're smiling.
You need to have a selector.
In this case the body is the selector.
And then in between the curly braces this one and this one here you specify the propertys and value.
You want to apply to the selector.
So in this case I have got several properties here and the text align is a prop. And I want the text
to be centred quite a property called background colour.
And I give it a hex value background colour.
You don't have to use hex value for example if you know the actual colour name you could specify that
in place of the hex value.
Here game carlaw as both fire why this column here refers to the colour of the text you use for the
body not the actual not the actual background.
Okay if you want to background colour you need to specify background colour font family refers to the
font the type of font that you can use.
It's always good to specify more than one.
So I'll just add a trio just in case the first font is not available on the machine that is viewing
this page so it can default to the other one.
So what I'm seeing here this is my first choice.
That font is now available would default to that someone's computers should have either both or either.
I had read a chunk of stylin from line 8 here to line 18.
Notice here I used the idea I attribute this idea here is derived from this hi deep inside here.
We've got an idea here.
Quad pad.
That's the idea I am referring to here or at last their target.
These are the propertys and standard values so you separate the property from the value with a colon.
Okay so again this is the idee style in the bag Tranquillo I've given it red border set to zero.
I don't want a border carlaw is white which is a colour Ah that picture frame a colour of text padding
Okay padding.
Is this space inside the element while margin is the space outside it.
So these are values are specified for the padding cursor the cursor property physically specifies the
type of cursor to be displayed when Point in on an element as well.
That is I've just said pointer margene again refers to displace alcides What I'm seeing here from the
top how one are one you want there to be is space 35 pixels from the top.
That's what that means.
I have added some more stylin from line 19 to 25.
And this time I stylin a class so if you got a dot followed by a name that is their class so I'm still
in a class.
This class will be added automatically with our javascript.
I'm just preparing this dialling for that beforehand.
So again the class here is the selector.
The property marjean Same from the top.
Our one week to drop 13 picasso's background Calli said that 2 x colour x value float means floor.
Basically if you got in means a want the elemental move to the right.
Okay where you have elma's moving to the right.
You need to also specify a clip so we use float you need to use Claire.
CLAIRE basically is used to clear any obstruction on either side and then the background column.
So he got padding padding refers to the space inside time same space inside from the right and wanted
to move 20 pieces.
Body radios is swards gives the around it corner.
So if you've got a square by their radius can lives mix it around a bit so that's why.
Read just property does all right to find it a couple of more properties to this class here.
Give me a whiff of 60 pixels and a height of 20 pixels.
By Does Tal I've said it to none so that there are no shadows or nothing on the borders.
I've added some more stylin to this Heidi called wrap up week.
If we go into our hastier mail here we'll see that we've got a deal here called wrapper which is the
main Deve.
Does he want.
I'm targeting here.
These are this dilon up apply to that idea.
I gained the weight.
I've said it with for 50 pixels a background colour and giving it a hex value.
The margin of it margin from the top.
I've said I want it to drop a hundred and twenty pixels margin from the left.
I want to move to -- 2 9 5 pixels padding from the bottom.
Remember padding is a space inside the element while a margin is a space outside the element so padding
from the bottom 30 pixels padding left 50 pixels pad in top 30 right 65 bodies radio of 25 pixels.
By all means to play around with his values you don't necessarily have to stick to my values just play
around and experiment and see what works for you.
I have had a chunk more of styling from line 43 to fifty seven so forth.
I'll explain 43 to 40 at first.
That is the U L which is the ordered list which I will insert using the using javascript.
Basically these are stylin the lists are what and don't want to have any stylin on the list and said
the text a line still left line height is the space between each text.
Okay and then 949 the idea core task.
So that's where we are shali import to the task.
We want to carry out.
So the task Heidi here life 49 give it a wave of 320 pixels a height of 30 pigs who's the margin from
the left to the left to move 17 pixels and line 54 is the H1 tag which I've given in margin from the
top.
I said I wanted to move 30 pixels from the top.
That's why that means.
Okay.
So that's all our stylin done are just save that week in.
If you have a map and see what it looks like.
All right so this is what the app looks like before the stylin so are just refresh.
And this is what it looks like now after the stylin So it looks much nicer more presentable with the
styling.
So that's it for this styling for this project in the next lechon or be doing the actual javascript
writing javascript code that will make all this work.
Thanks for watching.
Bye for now.